<template>
    <div>
      <div class="product-en main-width">
        <span class="theme-color theme-border-color">INDUSTRIAL LAYOUT</span>
      </div>
      <ul class="page-nav main-width">
      </ul>
      <div class="layout-div main-width">
        <div class="div-link-desc">
          <p>产业布局</p>
          <p class="div-link-en">Industrial Layout</p>
        </div>
        <div class="sc layout-posi">
          <p class="layout-item-title">{{shengchan.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in shengchan.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="yf layout-posi">
          <p class="layout-item-title">{{yanfa.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in yanfa.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="cp layout-posi">
          <p class="layout-item-title">{{chanpin.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in chanpin.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="jy layout-posi">
          <p class="layout-item-title ">{{jiaoyu.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in jiaoyu.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id" >{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="sj layout-posi">
          <p class="layout-item-title">{{shuju.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in shuju.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="yl layout-posi">
          <p class="layout-item-title">{{yiliao.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in yiliao.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
        <div class="zc layout-posi">
          <p class="layout-item-title">{{zhichi.class_name}}</p>
          <ul class="item-list animated fadeInUp">
            <li v-for="item in zhichi.content" :key="item.id"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'layout',
    async asyncData({$axios}){
      const layoutList = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_cybj_class');
      console.log(layoutList)
      let yf = layoutList[0];
      let sj = layoutList[1];
      let cp = layoutList[2];
      let yl = layoutList[3];
      let jy = layoutList[4];
      let sc = layoutList[6];
      let zc = layoutList[5];
      return {
        yanfa:yf,
        shuju:sj,
        chanpin:cp,
        yiliao:yl,
        jiaoyu:jy,
        shengchan: sc,
        zhichi: zc
      }
    },
    mounted(){
      this.logL();
    },
    methods:{
      logL(){
        // console.log(this.layoutList)
      }
    }
  }
</script>

<style scoped lang="less">
  .layout-div{
    // height:3.94rem;
    height: 4.5rem;
    background: url("~static/img/layout/product-layout.png") no-repeat left top/cover;
    position: relative;
    font-size: 0.15rem;
    color:#777;

  }
  .div-link-desc{
    position: absolute;
    left:0.187rem;
    bottom:0.14rem;
  }
  .yf{
    /*left:6.35rem;*/
    left:3.75rem;
    top:1.85rem;
  }
  .cp{
    left:6.87rem;
    /*left:8.3rem;*/
    top:0.2rem;
    /*top:0.05rem;*/
  }
  .item-list li{
    margin-top: 0.03rem;
    font-size: 0.12rem;
  }
  .sc {
    left: 1.4rem;
    top: 2.5rem;
  }
  .jy{
    /*left:10.15rem;*/
    left:9.85rem;
    /*top:0.4rem;*/
    top:0.15rem;
  }
  .zc {
    left: 10.6rem;
    top: 2rem;
  }
  .sj{
    /*left:7.8rem;*/
    left:8.6rem;
    top: 3rem;
  }
  .yl{
    left: 6.1rem;
    /*left:9.35rem;*/
    top: 3.1rem;
  }
  .layout-posi{
    position: absolute;
    font-size: 0.1rem;
    // color:#fff;
    color: #777;
  }
  .layout-posi a{
    // color:#fff;
    color: #777;
  }
  .layout-posi a:hover{
    // color:#f6ff03;
    color: #006935;
  }
  .layout-item-title{
    font-size: 0.22rem;
    margin-bottom: 0.02rem;
  }
</style>
